<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel='stylesheet' href='zTree/css/zTreeStyle/zTreeStyle.css'>
    <link rel="stylesheet" href="../../dist/wol-map-1.2.0.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .hidden {
            display: none;
        }

        body{
            background-color: lightgray;
        }
        #mapContainer{
            width: 100%;
            height: 90vh;
            border-bottom: 1px solid grey;
        }
        #mapTree{
            position: absolute;
            width: 240px;
            height: 280px;
            overflow: auto;
            top: 30px;
            right: 30px;
            background-color: white;
            border: 1px solid #DCDFE6;
            box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, 0.25)
        }
        .layer-manager-container {
            background-color: transparent;
            border: none;
        }
        .my-drone{
            background-size: 70px !important;
            background-position: -10px -10px !important;
        }
        .btn-con {
            padding: 15px 10px;
        }
    </style>
</head>
<body>
    <div id="mapContainer" class="map" ondragover="DragHandler.allowDrop(event)">
    </div>
    <div class="btn-con">
        <button onclick="turnOn()">开灯</button>
        <button onclick="off()">关灯</button>
        <button onclick="removeLayer()">删除遮罩</button>
        <button onclick="panTo()">平移视图</button>
        <button onclick="extentAt()">缩放视图</button>
        <button onclick="locatePoint()">定位点动画</button>
        <button onclick="locateLine()">定位线动画</button>
        <button onclick="locateArea()">定位面动画</button>

        <button onclick="getZoom()">获取缩放等级</button>
        <button onclick="addWMSLayer()">添加WMS图层</button>

        <button onclick="play()">播放轨迹</button>
        <button onclick="pause()">暂停播放</button>
        <button onclick="reset()">重置播放</button>
        <button onclick="clearTrace()">清除轨迹</button>
        <button onclick="initTrace()">初始化轨迹</button>
        <button onclick="alterTraceIcon()">更改轨迹图标</button>

        <button onclick="getLayerTree()">显示图层树</button>
        <button onclick="addOneLayer()">添加图层</button>
        <button onclick="removeOneLayer()">移除图层</button>
    </div>
    <div class="hidden" id="mapTree"></div>

    <script src="jquery-3.2.0.min.js"></script>
    <script src='zTree/js/jquery.ztree.core.js'></script>
    <script src='zTree/js/jquery.ztree.excheck.js'></script>
    <script src="../../dist/wol-map-1.2.0.min.js"></script>
    <script>
        var tempFea = wol.util.createFeatureFromWKT('LINESTRING(13071917.805032125 4739913.271585008,13071990.061910426 4739869.678592314)');
        wol.util.transform(tempFea, 'EPSG:3857', 'EPSG:4326');
        var tempWkt = wol.util.createWKTFromFeature(tempFea);
        console.info(tempWkt);


        //点、线、面
        var point = wol.util.createFeatureFromWKT('POINT(13059385.715379057 4734320.828070238)');
        var point2 = wol.util.createFeatureFromWKT('POINT(13059082.355923051 4734194.22924214)');
        var point3 = wol.util.createFeatureFromWKT('POINT(13059619.80377818 4734194.22924214)');
        var line = wol.util.createFeatureFromWKT('LINESTRING(13059084.744580185 4734660.017383253,13059082.355923051 4734194.22924214,13059619.80377818 4734194.22924214)');
        var polygon = wol.util.createFeatureFromWKT('POLYGON((13059084.744580185 4734660.017383253,13059082.355923051 4734194.22924214,13059619.80377818 4734194.22924214,13059586.362578306 4734650.462754718,13059084.744580185 4734660.017383253))');

        var power1 = wol.util.createFeatureFromWKT('POINT(117.401676642893 39.0021426013095))');
        var power2 = wol.util.createFeatureFromWKT('POINT(117.442361124606 38.9937750471075))');
        var powerLine = wol.util.createFeatureFromWKT('LINESTRING(117.401676642893 39.0021426013095,117.404167611933 39.0017903975037,117.406902861532 39.0016162655201,117.409461578942 39.001459727079,117.411246757159 38.9998550481807,117.412508937069 38.9984958301376,117.41398000707 38.9969450750432,117.414863925418 38.9959365993284,117.416244898455 38.9944488867469,117.418016543311 38.9925282331957,117.41820158251 38.9902380519223,117.421162373245 38.9898426408388,117.421387400158 38.9883804021347,117.42148802092 38.9872251214264,117.422147197573 38.9857254745649,117.4227360278 38.984467755635,117.424924310837 38.984046923202,117.42541508221 38.985436019328,117.42660968277 38.9856798429841,117.427773516305 38.9864544187053,117.428613668916 38.986777371245,117.437036374465 38.9893242447421,117.436722307185 38.9920886197919,117.436968867023 38.9933783743997,117.439593300766 38.9935832483334,117.442361124606 38.9937750471075)');
        wol.util.transform(power1, 'EPSG:4326', 'EPSG:3857');
        wol.util.transform(power2, 'EPSG:4326', 'EPSG:3857');
        wol.util.transform(powerLine, 'EPSG:4326', 'EPSG:3857');

        var pointEq = wol.util.createFeatureFromWKT('POINT(117.428049205342 39.0104528920549)');
        wol.util.transform(pointEq, 'EPSG:4326', 'EPSG:3857');

        //添加聚合要素
        var styleCache = {};
        var mapViewer = new wol.MapViewer('mapContainer', {
            zoom: 12,
            center: ol.proj.transform([109.921169, 29.702163], 'EPSG:4326', 'EPSG:3857'),
            layers: [
                {
                    type: 'XYZ',
                    name: 'baseLayer',
                    label: '电子底图',
                    url: 'https://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
                    zIndex: 0,
                    group: '基本图层'
                },
                /*{
                    type: 'XYZ',
                    name: 'baseLayerWx',
                    label: '卫星底图',
                    url: 'https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                    zIndex: 0,
                    group: '基本图层'
                },*/
                /*{
                    type: 'XYZ',
                    name: 'baseLayerWord',
                    label: '文字图层',
                    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=8&x={x}&y={y}&z={z}',
                    zIndex: 0,
                    group: '基本图层'
                },*/
                /* {
                    type: 'XYZ',
                    name: 'baseLayer1',
                    label: '电子底图1',
                    // url: 'http://localhost:6060/t/{z}/{y}/{x}',
                    zIndex: 0,
                    group: '基本图层'
                }, */

                {
                    type: 'Mask',
                    name: 'maskLayer',
                    label: '遮罩',
                    group: '基本图层'
                },
                {
                    type: 'Vector',
                    name: 'testLayer',
                    label: '东丽茶庄',
                    group: '东丽区',
                    // features: [point, line, polygon, power1, power2, powerLine],
                    features: [pointEq],
                },
                {
                    type: 'Cluster',
                    name: 'defectLayer',
                    label: '缺陷图层',
                    // features: [point, point2, point3],
                }
            ]
        });
        //console.info(mapViewer.getLayerByName('defectLayer').get('label'));
        var googleLayer = new ol.layer.Tile({
            source:new ol.source.XYZ({
                projection: 'EPSG:3857',
                url: 'http://localhost:8090/tile/t/{z}/{x}/{y}?t=3'
            }),
            opacity: 1,
            name: 'googleLayer',
            label: '谷歌电子地图',
        });
        var googleLayerWx = new ol.layer.Tile({
            source:new ol.source.XYZ({
                projection: 'EPSG:3857',
                url: 'http://localhost:8090/tile/t/{z}/{x}/{y}?t=4'
                // 我把地图命名为tile_new放在Jboss的war包下，请注意找正确图片路径以免加载不出来
            }),
            opacity: 0.5,
            name: 'googleLayerWx',
            label: '谷歌卫星地图',
        });
        var googleLayerHl = new ol.layer.Tile({
            source:new ol.source.XYZ({
                projection: 'EPSG:3857',
                url: 'http://localhost:8090/tile/t/{z}/{y}/{x}?t=5'
                // 我把地图命名为tile_new放在Jboss的war包下，请注意找正确图片路径以免加载不出来
            }),
            opacity: 0.5,
            name: 'googleLayerHl',
            label: '高程图',
        });
        // mapViewer.addLayer(googleLayer);
        // mapViewer.addLayer(googleLayerHl);
        // mapViewer.addLayer(googleLayerWx);


        function turnOn() {
            mapViewer.getLayerByName('maskLayer').setVisible(false);
        }
        function off() {
            mapViewer.getLayerByName('maskLayer').setVisible(true);
        }
        function removeLayer() {
            console.info(mapViewer.getLayerByName('maskLayer').get('label'));
        }
        function panTo() {
            mapViewer.panTo([13059385.715379057,4734320.828070238], 500);
        }
        function extentAt() {
            mapViewer.extentAt(polygon.getGeometry(), 500);
        }
        function getZoom() {
            var reso = mapViewer.getMap().getView().getZoom();
            console.log(reso);
        }
        function addWMSLayer() {
            var layer = wol.util.createWMSLayer({
                name: 'wmsLayer',
                url: 'http://demo.boundlessgeo.com/geoserver/wms',
                params: {'LAYERS': 'topp:states', 'TILED': true},
                serverType: 'geoserver',
            });
            mapViewer.addLayer(layer);
            mapViewer.getMap().getView().setCenter([-10997148, 4569099]);
        }

        var locater = new wol.Locator(mapViewer);
        function locatePoint() {
            locater.setFlashStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    stroke: new ol.style.Stroke({
                        color: '#ed3e00',
                        width: 2
                    }),
                    radius: 600
                })
            }));

            locater.locate(point, {
                duration: 1000,
                times: 3,
                autoView: true
            });
        }
        function locateLine() {
            locater.locate(line, {
                duration: 1000,
                times: 5,
                autoView: true
            });
        }
        function locateArea() {
            locater.locate(polygon, {
                duration: 1500,
                times: 3,
                autoView: true
            });
        }

        var tracer = new wol.Tracer(mapViewer);
        var traceLine1 = wol.util.createFeatureFromWKT('LINESTRING(116.95856094360352 39.45636749267578,116.99941635131836 39.32281494140625,117.06018447875977 39.33448791503906,117.09280014038086 39.27234649658203)');
        wol.util.transform(traceLine1, 'EPSG:4326', 'EPSG:3857');
        tracer.init({
            source: traceLine1,
            speed: 6,
            afterInitialize: function() {
                console.info('轨迹初始化完成 ^_^');
            },
            afterStart: function() {
                console.info('轨迹开始播放 ^_^');
            },
            afterComplete: function() {
                console.info('轨迹播放结束 ^_^');
            },
            ifDynamicTrack: false,
            ifLocate: false,
//            icon: 'tracer-car.png',   //轨迹播放图标
            iconClass: 'my-drone',  //图标样式
            iconSize: 50,   //图标大小
        });

        function play() {
            tracer.play();
        }
        function pause() {
            tracer.pause();
        }
        function reset() {
            tracer.reset();
        }
        function clearTrace() {
            tracer.clear();
        }
        function initTrace() {
            var traceLine = wol.util.createFeatureFromWKT('LINESTRING(117.00216293334961 39.37671661376953,117.03580856323242 39.36470031738281,117.07700729370117 39.363670349121094,117.10000991821289 39.338951110839844,117.16764450073242 39.36126708984375)');
            wol.util.transform(traceLine, 'EPSG:4326', 'EPSG:3857');
            tracer.init({
                source: traceLine,
                ifDynamicTrack: true
            });
        }
        function alterTraceIcon() {
            tracer.setIcon({
                src: 'a/tracer-car.png',
                scale: 0.46
            });
        }

        function getLayerTree() {
            var layerManager = new wol.LayerManager(mapViewer);
            layerManager.init({
                target: 'mapTree',
                exclude: ['locateLayer']
            });
            $('#mapTree').removeClass('hidden');
        }

        var layer1 = wol.util.createVectorLayer({
            name: 'testLayer',
            label: '测试图层'
        });
        function addOneLayer() {
            mapViewer.addLayer(layer1);
        }
        function removeOneLayer() {
            mapViewer.removeLayer(layer1);
        }

        /**
         * 从WKT字符串中解析要素
         */
        function createFeatureFromWKT(wktStr) {
            var format = new ol.format.WKT();
            var feature = format.readFeature(wktStr);
            return feature;
        }

        /**
         *  获取几个区域的geometry
         */
        function createGeometryFromFeature(feature){
            var geometry = feature.getGeometry();
            return geometry;
        }

        var hgFeature = createFeatureFromWKT('POLYGON((119.606521 40.057249,119.606483 40.057254,119.606357 40.054476,119.606521 40.057249,119.61262 40.056577,119.612491 40.059641,119.618287 40.059918,119.619559 40.063619,119.624595 40.061461,119.629373 40.06641,119.639297 40.058215,119.644428 40.061981,119.653264 40.060092,119.666241 40.065166,119.665039 40.075653,119.670797 40.070718,119.667966 40.061794,119.672553 40.054947,119.667961 40.047528,119.655769 40.051771,119.646842 40.047723,119.650597 40.045065,119.649834 40.041148,119.639942 40.043158,119.642459 40.029904,119.636879 40.029775,119.631752 40.035573,119.624664 40.037292,119.628238 40.024273,119.632839 40.025097,119.628889 40.021371,119.631221 40.018886,119.627069 40.017024,119.626898 40.006851,119.622402 40.006781,119.616191 40.000031,119.633799 39.99394,119.640402 39.997254,119.659716 39.994631,119.663637 39.998997,119.666465 39.994933,119.67288 39.995182,119.671949 39.991936,119.678997 39.994875,119.676629 39.98244,119.689824 39.975012,119.68601 39.973394,119.69197 39.972486,119.693212 39.966812,119.708061 39.970939,119.705004 39.959561,119.71017 39.955115,119.707828 39.948202,119.712891 39.944111,119.688465 39.940286,119.688557 39.936321,119.675145 39.936291,119.675083 39.930951,119.66893 39.924055,119.674744 39.931265,119.673533 39.934919,119.668972 39.931705,119.673733 39.938239,119.65502 39.933942,119.658575 39.920274,119.655928 39.917138,119.657602 39.923231,119.653939 39.921946,119.656303 39.924599,119.652956 39.932568,119.641279 39.92391,119.63836 39.927713,119.634384 39.926803,119.606419 39.903998,119.611251 39.908688,119.595655 39.904735,119.598996 39.908439,119.596473 39.911383))');
        //console.info(createGeometryFromFeature(hgFeature));
    </script>
</body>
</html>
